<template>
  <view class="ver-layout">
    <!-- 上面的布局  -->
    <view class="top-layout">
      <view class="hor-layout-center">
        <image class="student-icon" :src="studentObj.student_avatar?studentObj.student_avatar:ic_student_default1"/>
        <view class="ver-layout student-info">
          <view class="student-name">{{ studentObj.student_name ? studentObj.student_name : '姓名：' }}</view>
          <view class="student-class">{{ studentObj.class_title ? studentObj.class_title : '班级：' }}</view>
        </view>
        <view class="major-name" v-if="getMajor">{{ getMajor }}</view>
      </view>
    </view>
    <!-- 课时布局   -->
    <view class="lesson-layout hor-layout">
      <view class="lesson-item ver-layout-center-all">
        <view class="lesson-title">总课时</view>
        <view class="lesson-num">{{ studentInfo.total }}</view>
      </view>
      <view class="divider-line"></view>
      <view class="lesson-item ver-layout-center-all">
        <view class="lesson-title">剩余课时</view>
        <view class="lesson-num">{{ studentInfo.remaining }}</view>
      </view>
      <view class="divider-line"></view>
      <view class="lesson-item ver-layout-center-all">
        <view class="lesson-title">已消课时</view>
        <view class="lesson-num" style="color:#42B4AB">{{ studentInfo.haspin }}</view>
      </view>
    </view>
    <!-- 消课时间   -->
    <view class="cost-time-title">消课记录</view>
    <view class="cost-time-box">
      <view v-for="(item,index) in studentInfo.course_list" :key="index" class="cost-time-item hor-layout"
            :class="{'none':index===studentInfo.course_list.length-1}">
        <view class="cost-title">{{ item.major }}</view>
        <view class="cost-time">{{ item.updated_at }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {ClassStudentInfoApi} from "@/api/enterStudent.js"

let ic_student_default1 = require("@/static/home/ic_student_default1.png")
let engine = new ClassStudentInfoApi()
export default {
  name: "studentInfo",
  data() {
    return {
      ic_student_default1,
      studentObj: {},
      studentInfo: {
        course_list: []
      }
    }
  },
  computed: {
    getMajor() {
      if (this.studentInfo.course_list && this.studentInfo.course_list.length > 0)
        return this.studentInfo.course_list[0].major
      return ""
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.getStudentInfo()
  },
  methods: {
    getStudentInfo() {
      let {student_id, class_id} = this.studentObj
      engine.getStudentInfo({student_id, class_id}).then(res => {
        this.studentInfo = res.data
      }).catch(err => {
        this.$u.toast(err.message);
      })
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.top-layout {
  position: fixed;
  width: 100%;
  height: 90px;
  padding: 0px 12px;
  background: #42B4AB;
}

.student-icon {
  width: 48px;
  height: 48px;
  background: #F8D0D0;
  border-radius: 50%;
}

.student-info {
  flex: 1;
  margin-left: 12px;
}

.student-name {
  font-size: 14px;
  line-height: 14px;
  color: #FFFFFF;
}

.student-class {
  margin-top: 6px;
  font-size: 12px;
  color: #FFFFFF;
}

.major-name {
  width: 60px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #FF873E;
  border-radius: 9px;
  /*文本样式*/
  font-size: 12px;
  color: #FFFFFF;
}

.lesson-layout {
  z-index: 100;
  width: calc(100% - 24px);
  padding: 10px 0px;
  margin: auto;
  margin-top: calc(90px - 24px);
  background: #FFFFFF;
  border-radius: 3px;
}

.lesson-item {
  flex: 1;
}

.divider-line {
  width: 1px;
  height: 58px;
  background: #42B4AB;
}

.lesson-title {
  font-size: 12px;
  color: #333333;
}

.lesson-num {
  margin-top: 13px;
  font-size: 14px;
  color: #333333;
}

.cost-time-title {
  font-size: 12px;
  color: #666666;
  margin-top: 24px;
  margin-left: 12px;
}

.cost-time-box {
  margin: 18px auto;
  width: calc(100% - 24px);
  min-height: 198px;
  background: #FFFFFF;
  border-radius: 6px;
}

.cost-time-item {
  margin: 0px 12px;
  padding: 18px 0px;
  border-bottom: 1px solid #E5E5E5;
}

.cost-time-item.none {
  border-bottom: none;
}

.cost-title {
  flex: 1;
  font-size: 14px;
  color: #333333;
}

.cost-time {
  font-size: 12px;
  color: #333333;
}


</style>
